<template>
  <div style="padding: 10px">
    <div
      class="electricity"
      v-for="(items, index) in data"
      :key="items.meterId"
    >
      <div class="title">
        <span
          >电表ID：{{ items.meterId }} <br />
          当前状态：{{ items.st == 0 ? "断开" : "合闸" }}
        </span>
        <span>
          <a-spin
            :spinning="
              map1.get(items.meterId) != null ? map1.get(items.meterId) : false
            "
          >
            <a-button
              type="primary"
              @click="switchSplit(items, index, 1)"
              style="margin-right: 10px"
            >
              合闸
            </a-button>
          </a-spin>
          <a-spin
            :spinning="
              map0.get(items.meterId) != null ? map0.get(items.meterId) : false
            "
          >
            <a-button type="primary" @click="switchSplit(items, index, 0)">
              分闸
            </a-button>
          </a-spin>
        </span>
      </div>
      <div class="line-wrapper">
        <div class="line-content">
          <gaugeChart
            :key="items.eas + items.meterId + 'g1'"
            :id="items.eas + items.meterId + 'g1'"
            :chartTitle="'总电量'"
            :vs="items.eas"
          />
        </div>
        <div class="line-content">
          <gaugeChart
            :key="items.efs + items.meterId + 'g2'"
            :id="items.efs + items.meterId + 'g2'"
            :chartTitle="'正向电量'"
            :vs="items.efs"
          />
        </div>
        <div class="line-content">
          <lineChart
            :key="items.vs + items.meterId + 'l1'"
            :id="items.vs + items.meterId + 'l1'"
            :chartTitle="'电压'"
            :list="items.vs"
            :color="'#EE82EE'"
            :unit="'V'"
          />
        </div>
        <div class="line-content">
          <lineChart
            :key="items.as + items.meterId + 'l2'"
            :id="items.as + items.meterId + 'l2'"
            :chartTitle="'电流'"
            :list="items.as"
            :color="'#7FFFD4'"
            :unit="'A'"
          />
        </div>
        <div class="line-content">
          <lineChart
            :key="items.pias + items.meterId + 'l3'"
            :id="items.pias + items.meterId + 'l3'"
            :chartTitle="'瞬时有功'"
            :list="items.pias"
            :color="'#00BFFF'"
            :unit="'W'"
          />
        </div>
        <div class="line-content">
          <lineChart
            :key="items.pfs + items.meterId + 'l4'"
            :id="items.pfs + items.meterId + 'l4'"
            :chartTitle="'功率因数'"
            :list="items.pfs"
            :color="'#f8bd0b'"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onBeforeUnmount, reactive, ref, toRefs } from "vue";
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";
import lineChart from "./lineChart/index.vue";
import gaugeChart from "./gaugeChart/index.vue";
import { time } from "echarts";

export default {
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
    lineChart,
    gaugeChart,
  },
  data() {
    return {
      map0: new Map(),
      map1: new Map(),
      timer: null,
      data: null,
      timerMap: new Map(),
    };
  },
  unmounted() {
    // 清除所有定时器
    let end = setInterval(function () {}, 10000);
    for (let i = 1; i <= end; i++) {
      clearInterval(i);
    }
  },
  mounted() {
    this.getMeterLog();
    // 使用定时器
    this.timer = setInterval(() => {
      this.getMeterLog();
    }, 1000); // 一秒执行一次
  },
  methods: {
    getMeterLog() {
      // 载入时执行
      get("/manager/elecMeter/log").then((res) => {
        this.data = res.data;
        for (var i = 0; i < this.data.length; i++) {
          this.data[i].vs = this.convert60To24(this.data[i].vs);
          this.data[i].as = this.convert60To24(this.data[i].as);
          this.data[i].pias = this.convert60To24(this.data[i].pias);
          this.data[i].pfs = this.convert60To24(this.data[i].pfs);
        }
      });
    },
    switchSplit(item, index, st) {
      if (st == 0) {
        this.map0.set(item.meterId, true);
      } else if (st == 1) {
        this.map1.set(item.meterId, true);
      }

      get("/trade/tradeInfo/split1", {
        meterId: item.meterId,
        isSplit: st,
      });

      let in1 = setInterval(() => {
        if (this.data[index].st == st) {
          if (st == 0) {
            this.map0.set(item.meterId, false);
          } else if (st == 1) {
            this.map1.set(item.meterId, false);
          }
          this.$message.success((st == 1 ? "合闸" : "分闸") + "成功!");
          clearInterval(in1);
        }
      }, 1000);

      if (st == 0) {
        setTimeout(() => {
          this.map0.set(item.meterId, false);
        }, 5000);
      } else if (st == 1) {
        setTimeout(() => {
          this.map1.set(item.meterId, false);
        }, 5000);
      }
    },
    convert60To24(v) {
      var a = [];
      var start = v.length >= 24 ? v.length - 24 : 0;
      for (var i = start; i < v.length; i++) {
        a.push(v[i]);
      }
      return a;
    },
  },
};
</script>
<style>
.electricity {
  display: flex;
  align-items: center;
  border-bottom: dashed 1px #5470c6;
}
.title {
  display: flex;
  flex-wrap: wrap;
  height: 260px;
  width: 200px;
  align-content: baseline;
  flex-direction: column;
}
.title > span {
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
}
.line-wrapper {
  display: flex;
  flex: 1;
  margin-top: 20px;
}
.line-content {
  width: 280px;
}
</style>